<template>
  <div class="resource-layout">
    <!-- 左侧边栏 -->
    <div class="sidebar">
      <el-menu
        :default-active="activeMenu"
        class="sidebar-menu"
        router
      >
        <el-sub-menu index="/resources/multimedia">
          <template #title>
            <el-icon><VideoCamera /></el-icon>
            <span>多媒体资源</span>
          </template>
          <el-menu-item index="/resources/video">视频资源</el-menu-item>
          <el-menu-item index="/resources/image">图片资源</el-menu-item>
          <el-menu-item index="/resources/multimedia/history">历史记录</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>

    <!-- 右侧内容区 -->
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { VideoCamera } from '@element-plus/icons-vue'

const route = useRoute()
const activeMenu = computed(() => route.path)
</script>

<style scoped>
.resource-layout {
  display: flex;
  height: calc(100vh - 60px);
  margin-top: 60px;
}

.sidebar {
  width: 200px;
  background: #fff;
  border-right: 1px solid #e6e6e6;
  border-radius: 8px;
  margin: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.sidebar-menu {
  border-right: none;
  border-radius: 8px;
}

.sidebar-menu :deep(.el-menu-item),
.sidebar-menu :deep(.el-sub-menu__title) {
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
}

.sidebar-menu :deep(.el-menu-item.is-active) {
  background-color: #ecf5ff;
  color: #1a73e8;
}

.sidebar-menu :deep(.el-menu-item:hover),
.sidebar-menu :deep(.el-sub-menu__title:hover) {
  background-color: #f5f7fa;
}

.content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}
</style> 